<template>
    <div class="menu-wrapper">
        <el-form ref="sysMchForm" :model="form" :rules="rules" label-width="100px">

          <el-form-item label="注册账号" prop="username">
            <el-col :span="6">
              <el-input v-model="form.username" />
            </el-col>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-col :span="6">
              <el-input show-password v-model="form.password" />
            </el-col>
          </el-form-item>
          <el-form-item label="代理名称" prop="name">
                <el-col :span="10">
                    <el-input v-model="form.name" />
                </el-col>
            </el-form-item>
            <el-form-item label="代理简称" prop="shortName">
                <el-col :span="6">
                    <el-input v-model="form.shortName" />
                </el-col>
            </el-form-item>
          <el-form-item label="上级代理">
            <el-col :span="6">
              <el-select style="width: 100%" v-model="mchName" value-key="id" clearable filterable placeholder="所属商户" :filter-method="remoteMethod" @change="selectMch">
                <el-option v-for="item in mchList" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
            <el-form-item label="所在地" prop="areaId">
                <el-col :span="10">
                    <Distpicker @selected="onSelected" :province="district.province" :city="district.city" :area="district.area"></Distpicker>
                </el-col>
            </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-col :span="12">
              <el-input v-model="form.address" />
            </el-col>
          </el-form-item>
          <el-form-item label="负责人" prop="linkman">
            <el-col :span="6">
              <el-input v-model="form.linkman" />
            </el-col>
          </el-form-item>
          <el-form-item label="办公电话" prop="phone">
            <el-col :span="6">
              <el-input @mousewheel.native.prevent type="number" v-model="form.phone" />
            </el-col>
          </el-form-item>

            <el-form-item label="备注">
                <el-col :span="12">
                    <el-input v-model="form.remark" />
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="clicked" @click="saveMch('sysMchForm')">
                    完 成
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<style scoped>
.menu-wrapper {
    margin: 15px;
}
.el-input--medium {
    width: 100%;
}
.el-select--medium {
    width: 100%;
}
</style>
<script>
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import Distpicker from "@/components/Distpicker/Distpicker";
import { getInfo, save } from "@/api/sysMch";
import { checkUserExists } from "@/api/sysUser";
import md5 from "js-md5";
import SingleUpload from "@/components/Upload/singleUpload";
import { list as mchList } from "@/api/sysMch";
export default {
    name: "agent-add",
    filters: {},
    components: {
        Distpicker,
        SingleUpload,
    },
    data() {
        const checkUser = (rule, value, callback) => {
            //检查账号是否存在
            if (utils.isNull(value)) {
                callback(new Error("请输入注册账号"));
            } else {
                const params = new URLSearchParams();
                params.append("username", value);
                checkUserExists(params).then((response) => {
                    console.log(response);
                    if (response.data !== 0) {
                        callback(new Error("该账号已存在，不能重复"));
                    } else {
                        callback();
                    }
                });
            }
        };
        const checkPassword = (rule, value, callback) => {
            if (value.length < 6) {
                callback(new Error("密码长度不能小于6位"));
            } else {
                callback();
            }
        };
        return {
            singleUploadTitle: "100*100",
            clicked: false, // 按钮防双击
            district: { province: 440000, city: "广州市", area: "海珠区" },
            form: {
                name: "",
                shortName: "",
                linkman: "",
                phone: "",
                remark: "",
                areaId: 440000,
                areaName: "广东省广州市海珠区",
                address: "",
                username: "",
                password: "",
                logo: "",
                scopeType: "",
                parentMchId:'',
                mchType:4,
                yearFee:0
            },
            mchList: [],
            mchName: "",
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入代理商名称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 20,
                        message: "长度在 2 到 20 个字符",
                        trigger: "blur",
                    },
                ],
                shortName: [
                    {
                        required: true,
                        message: "请输入代理商简称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 20,
                        message: "长度在 2 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                username: [
                    { required: true, validator: checkUser, trigger: "blur" },
                ],
                password: [
                    {
                        required: true,
                        validator: checkPassword,
                        trigger: "blur",
                    },
                ],
                areaId: [
                    {
                        required: true,
                        message: "请输入选择所在地",
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入联系电话",
                        trigger: "blur",
                    },
                ],
                linkman: [
                    {
                        required: true,
                        message: "请输入联系人",
                        trigger: "blur",
                    },
                ],
                address: [
                    {
                        required: true,
                        message: "请输入详细地址",
                        trigger: "blur",
                    },
                ],
                scopeType: [
                    {
                        required: true,
                        message: "请选择代理商版本",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    created() {
        this.loadMch("");
    },
    methods: {
        scopeTypechange(val) {
            this.form.scopeType = val;
        },
        onSelected(val) {
            if (!utils.isNull(val.area) && !utils.isNull(val.area.code)) {
                this.form.areaId = val.area.code;
                this.form.areaName = val.area.value;
            }
        },
        saveMch(form) {
            const _this = this;
            this.$refs[form].validate((valid) => {
                if (valid) {
                    // 校验表单
                    _this.clicked = true;
                    let formData = {
                        name: _this.form.name,
                        shortName: _this.form.shortName,
                        linkman: _this.form.linkman,
                        phone: _this.form.phone,
                        remark: _this.form.remark,
                        areaId: _this.form.areaId,
                        areaName: _this.form.areaName,
                        address: _this.form.address,
                        status: 0,
                        logo: _this.form.logo,
                        scopeType: _this.form.scopeType,
                        parentMchId:_this.form.parentMchId,
                        mchType:4,
                        yearFee:_this.form.yearFee
                    };
                    const params = new URLSearchParams();
                    params.append("username", _this.form.username);
                    params.append("password", md5(_this.form.password));
                    save(formData, params)
                        .then((response) => {
                            console.log(response);
                            _this.clicked = false;
                            EventBus.$emit("agent-add", response.data);
                            _this.$store
                                .dispatch("tagsView/delView", _this.$route)
                                .then(({ visitedViews }) => {
                                    _this.$router.push({
                                        path: "/agent/list",
                                    });
                                }); // 关闭当前tab回到列表
                        })
                        .catch((error) => {
                            _this.clicked = false;
                        });
                } else {
                    return false;
                }
            });
        },
        remoteMethod(query) {
            this.loadMch(query);
        },
        loadMch(query) {
            var _this = this;
            let params = new URLSearchParams();
            params.append("name", query);
            mchList(params)
                .then((response) => {
                    _this.mchList = response.data.data;
                })
                .catch((error) => {
                    console.log("error!!");
                });
        },
        selectMch(e) {
            console.log(e);
            if (!utils.isNull(e)) {
                this.mchName = e.name;
                this.form.parentMchId = e.id;
            } else {
                this.mchName = "";
                this.form.parentMchId = "";
            }
        },
    },
};
</script>
